import React, { Component } from 'react'
import { Route, Switch, NavLink } from "react-router-dom";
import "./index.less";

import home_n from '../../assets/img/home.png';
import home_y from '../../assets/img/homeFull.png';

import cate_n from '../../assets/img/cate.png';
import cate_y from '../../assets/img/cateFull.png';

import shop_n from '../../assets/img/shop.png';
import shop_y from '../../assets/img/shopFull.png';

import mine_n from '../../assets/img/mine.png';
import mine_y from '../../assets/img/mineFull.png';

import Home from '../home/home'
import Cate from '../cate/cate'
import Shop from '../shop/shop'
import Mine from '../mine/mine'

export default class index extends Component {
  render() {
    // console.log(this.props);
    let { location: { pathname } } = this.props;
    return (
      <div className='index'>
        {/* 二级路由视图 */}
        <Switch>
          <Route path="/index/home" component={Home}></Route>
          <Route path="/index/cate" component={Cate}></Route>
          <Route path="/index/shop" component={Shop}></Route>
          <Route path="/index/mine" component={Mine}></Route>
        </Switch>

        {/* 底部导航 */}
        <footer className='footer'>
          {/* Link和NavLink都可以做路由导航，唯一的区别就是NavLink有activeClassName，Link没有。*/}
          <NavLink activeClassName='active' to="/index/home">
            <img src={pathname === '/index/home' ? home_y : home_n} alt="" />
            <div>首页</div>
          </NavLink>
          <NavLink activeClassName="active" to="/index/cate">
            <img src={pathname === '/index/cate' ? cate_y : cate_n} alt="" />
            <div>分类</div>
          </NavLink>
          <NavLink activeClassName="active" to="/index/shop">
            <img src={pathname === '/index/shop' ? shop_y : shop_n} alt="" />
            <div>购物车</div>
          </NavLink>
          <NavLink activeClassName="active" to="/index/mine">
            <img src={pathname === '/index/mine' ? mine_y : mine_n} alt="" />
            <div>我的</div>
          </NavLink>
        </footer>
      </div>
    )
  }
}
